<template>
  <div class="container">
    <!-- 导航栏 -->
    <van-nav-bar
      :title="userInfo.name"
      left-arrow
      @click-left="$router.back()"
    >
      <template #right>
        <van-icon
          @click="$toast('暂未开发该功能')"
          name="weapp-nav"
          size="18"
        />
      </template>
    </van-nav-bar>
    <!-- 头部信息区域 -->
    <div class="header">
      <div class="head">
        <van-image
          :src="userInfo.photo"
          round
        />
      </div>
      <div class="message">
        <div class="data">
          <div class="data-item">
            <div class="count">{{userInfo.art_count}}</div>
            <div class="class">发布</div>
          </div>
          <div class="data-item">
            <div class="count">{{userInfo.follow_count}}</div>
            <div class="class">关注</div>
          </div>
          <div class="data-item">
            <div class="count">{{userInfo.fans_count}}</div>
            <div class="class">粉丝</div>
          </div>
          <div class="data-item">
            <div class="count">{{userInfo.like_count}}</div>
            <div class="class">获赞</div>
          </div>
        </div>
        <div class="btn">
          <van-button type="info">关注</van-button>
        </div>
      </div>
    </div>
    <!-- 介绍区域 -->
    <div class="introduce">
      <div class="cow">
        <span class="col">认证：</span><span>{{userInfo.certi}}</span>
      </div>
      <div class="cow">
        <span class="col">简介：</span><span>{{userInfo.intro}}</span>
      </div>
    </div>
    <!-- 文章列表区 -->
    <article-list
      :userId="userId"
      :photo="userInfo.photo"
    ></article-list>
  </div>
</template>
<script>
import { getUserInfo } from '@/api/user.js'
import articleList from './componets/article-list'
export default {
  props: {
    userId: {
      type: [String, Number, Object],
      required: true
    }
  },
  created () {
    this.getUserMessage()
  },
  data () {
    return {
      userInfo: {}
    }
  },
  methods: {
    async  getUserMessage () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      try {
        const { data: res } = await getUserInfo(this.userId)
        console.log(res)
        this.userInfo = res.data
        this.$toast.success('加载成功')
      } catch (err) {
        this.$toast.fail('加载失败')
      }
    }
  },
  components: {
    articleList
  },
  name: 'user'
}
</script>
<style lang="less" scoped>
.container {
  height: 100%;
  background: #f7f7f7;
}
/deep/ .van-nav-bar {
  background: rgb(48, 148, 255);
  .van-nav-bar__title {
    color: aliceblue;
  }
  .van-icon {
    color: aliceblue;
  }
}
.header {
  margin-bottom: 12px;
  background: rgb(255, 255, 255);
  display: flex;
  height: 240px;
  .head {
    display: flex;
    justify-content: center;
    width: 220px;
    height: 100%;
    .van-image {
      margin-top: 22px;
      width: 160px;
      height: 160px;
    }
  }
  .message {
    flex-grow: 1;
    height: 100%;
    .data {
      display: flex;
      justify-content: space-around;
      .data-item {
        margin-top: 28px;
        text-align: center;
        .count {
          font-weight: 700;
          font-size: 26px;
          color: #0d0a10;
        }
        .class {
          font-size: 21px;
          color: #9c9b9d;
        }
      }
    }
    .btn {
      width: 100%;
      text-align: center;
      .van-button {
        margin-top: 33px;
        width: 289px;
        height: 55px;
        background: #6bb5ff;
        border: none;
        color: aliceblue;
      }
    }
  }
}
/deep/ .introduce {
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  padding: 28px 25px;
  height: 150px;
  margin-bottom: 12px;
  background: rgb(255, 255, 255);
  .cow {
    span {
      font-size: 23px;
    }
    .col {
      color: #646263;
    }
  }
}
</style>
